<template>
  <div class="monitor_page">
    <!-- table -->
    <el-card class="monitor_page-top" shadow="always">
      <div class="filter_header">
        <el-form ref="form" label-width="90px" style="display: inline-block;margin-right: 30px">
          <div class="monitor_page-filter">
            <el-form-item label="起止时间：">
              <el-date-picker
                size="small"
                style="width: 220px;background: transparent;"
                value-format="timestamp"
                v-model="timerArray"
                type="daterange"
                :picker-options="pickerOptions"
                :clearable="false"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-form>
        <el-button
          size="small"
          type="primary"
          class="common_btn-defalut"
          icon="el-icon-search"
          @click="searchRecord">筛选
        </el-button>
        <el-button
          style="color: #0beaeb;float: right;margin-top: 20px"
          size="small"
          type="text"
          @click="toRouter">查看更多>
        </el-button>
      </div>
      <el-card class="card_echarts" shadow="hover">
        <echarts-one-change v-show="showCharts(1)" ref="echarts1"></echarts-one-change>
        <echarts-two-change v-show="showCharts(2)" ref="echarts2"></echarts-two-change>
        <echarts-three-change v-show="showCharts(3)" ref="echarts3"></echarts-three-change>
        <echarts-four-change v-show="showCharts(4)" ref="echarts4"></echarts-four-change>
        <echarts-five-change v-show="showCharts(5)" ref="echarts5"></echarts-five-change>
        <echarts-six-change v-show="showCharts(6)" ref="echarts6"></echarts-six-change>
        <echarts-seven-change v-show="showCharts(7)" ref="echarts7"></echarts-seven-change>
        <echarts-eight-change v-show="showCharts(8)" ref="echarts8"></echarts-eight-change>
        <echarts-ten-change v-show="showCharts(10)" ref="echarts10"></echarts-ten-change>
        <echarts-eleven-change v-show="showCharts(11)" ref="echarts11"></echarts-eleven-change>
        <echarts-twelve-change v-show="showCharts(12)" ref="echarts12"></echarts-twelve-change>
        <echarts-thirteen-change v-show="showCharts(13)" ref="echarts13"></echarts-thirteen-change>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import EchartsEightChange from '../monitor-echarts/popup/echarts-8'
import EchartsOneChange from '../monitor-echarts/popup/echarts-1'
import EchartsThreeChange from '../monitor-echarts/popup/echarts-3'
import EchartsTwoChange from '../monitor-echarts/popup/echarts-2'
import EchartsFiveChange from '../monitor-echarts/popup/echarts-5'
import EchartsSixChange from '../monitor-echarts/popup/echarts-6'
import EchartsSevenChange from '../monitor-echarts/popup/echarts-7'
import EchartsFourChange from '../monitor-echarts/popup/echarts-4'
import EchartsTenChange from '../monitor-echarts/popup/echarts-10'
import EchartsElevenChange from '../monitor-echarts/popup/echarts-11'
import EchartsTwelveChange from '../monitor-echarts/popup/echarts-12'
import EchartsThirteenChange from '../monitor-echarts/popup/echarts-13'
import {
  searchRecord,
} from '@/services/model/project-info'

export default {
  components: {
    EchartsOneChange,
    EchartsThreeChange,
    EchartsEightChange,
    EchartsFiveChange,
    EchartsSixChange,
    EchartsTwoChange,
    EchartsTenChange,
    EchartsElevenChange,
    EchartsTwelveChange,
    EchartsThirteenChange,
    EchartsSevenChange,
    EchartsFourChange
  },
  data() {
    return {
      //时间选择器
      pickerOptions: {
        shortcuts: [{
          text: '最近24小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近3天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }],
        onPick: obj => {
          this.picerMinDate = new Date(obj.minDate).getTime()
        },
        disabledDate: time => {
          if (this.picerMinDate) {
            // 最多可选7天
            const LIMIT = 7 * 24 * 60 * 60 * 1000
            const maxTime = this.picerMinDate + LIMIT
            const minTime = this.picerMinDate - LIMIT
            return time.getTime() > maxTime || time.getTime() < minTime
          }
        }
      },
      // 当前的图表钩子
      chartsName: '',
      // 分页参数
      form: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      timerArray: [],
      collectionList: [],
      monitorInfo: {}
    }
  },
  computed: {
    //展示绘图
    showCharts() {
      return function (monitorType) {
        return this.monitorInfo.monitorType === monitorType
      }
    },
  },
  methods: {
    //点击更多跳转
    toRouter() {
      let val = this.monitorInfo
      let routeUrl = this.$router.resolve({path: `/project/${val.projectId}/work-point/${val.workPointId}/monitor/${val.monitorType}?activeId=${val.id}`})
      window.open(routeUrl.href, '_blank');
    },
    //查询数据
    async searchRecord() {
      let startTimer = this.timerArray[0]
      let endTimer = this.timerArray[1]
      this.form.endCreateTime = endTimer
      this.form.startCreateTime = startTimer
      let res = await searchRecord(this.form)
      this.update(res.data || {}, this.monitorInfo.name)
    },
    //初始化条件
    async initData(monitorInfo) {
      // 默认7天数据
      const timer = 7 * 24 * 3600 * 1000
      let endTimer = monitorInfo.collectionTime + 1000
      let startTimer = monitorInfo.collectionTime - timer
      // 结束时间加1s
      this.timerArray = [startTimer, endTimer]
      this.monitorInfo = monitorInfo
      this.form = {
        monitorType: Number(monitorInfo.monitorType),
        endCreateTime: endTimer,
        startCreateTime: startTimer,
        pointId: monitorInfo.id,
      }
      this.searchRecord()
    },
    // 数据刷新
    update(data, monitorName) {
      this.collectionList = data.recordList || []
      //拉线
      if (this.monitorInfo.monitorType === 3) {
        this.chartsName = 'echarts3'
        this.$refs[this.chartsName].updateEchart(data, monitorName)
        //倾角
      } else if (this.monitorInfo.monitorType === 8) {
        this.chartsName = 'echarts8'
        this.$refs[this.chartsName].updateEchart(data, monitorName)
        //地下水位
      } else if (this.monitorInfo.monitorType === 5) {
        this.chartsName = 'echarts5'
        this.$refs[this.chartsName].updateEchart(data, monitorName, this.monitorInfo.holeDepth)
        //降雨量
      } else if (this.monitorInfo.monitorType === 4) {
        this.chartsName = 'echarts4'
        this.$refs[this.chartsName].updateEchart(data.dailyRainfall, '过去24小时')
        //地表位移
      } else if (this.monitorInfo.monitorType === 2) {
        this.chartsName = 'echarts2'
        this.$refs[this.chartsName].updateEchart(data, monitorName)
        //温湿度
      } else if (this.monitorInfo.monitorType === 10) {
        this.chartsName = 'echarts10'
        this.$refs[this.chartsName].updateEchart(data, monitorName)
        //风向风速
      } else if (this.monitorInfo.monitorType === 11) {
        this.chartsName = 'echarts11'
        this.$refs[this.chartsName].updateEchart(data, monitorName)
        //风向风速
      } else if (this.monitorInfo.monitorType === 12) {
        this.chartsName = 'echarts12'
        this.$refs[this.chartsName].updateEchart(data, monitorName)
        //振动
      } else if (this.monitorInfo.monitorType === 13) {
        this.chartsName = 'echarts13'
        this.$refs[this.chartsName].updateEchart(data, monitorName)
        //锚索应力
      } else if (this.monitorInfo.monitorType === 6) {
        this.chartsName = 'echarts6'
        this.$refs[this.chartsName].updateEchart(data, monitorName)
        //静力水准
      } else if (this.monitorInfo.monitorType === 7) {
        this.chartsName = 'echarts7'
        this.$refs[this.chartsName].updateEchart(data.paintList, monitorName)
        //深部位移
      } else if (this.monitorInfo.monitorType === 1) {
        this.chartsName = 'echarts1'
        this.selectionList = JSON.parse(JSON.stringify(this.collectionList.slice(0, 7)));
        // holeDepth  当操作数据更新时，this.monitorInfo 可能未拿到值 所以通过传递
        this.$refs[this.chartsName].updateEchart(this.selectionList, this.monitorInfo.holeDepth);
      }
    }
  }
}
</script>

<style scoped="scoped" lang="less">

  @import url('./commom.less');

  /deep/ .el-range-editor--small .el-range-input {
    font-size: 13px;
    color: #0beaeb !important;
    background: transparent;
  }

  // 还需自定义的css
  .card_echarts {
    height: 350px;
  }

  .monitor_page-left {
    border: 1px solid #c00003;
  }

  .el-card {
    width: 100%;
    background: transparent;
  }
</style>
